<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <input type="text" placeholder="请输入账号" />
      <input type="text" />
      <input type="text" />
      <input type="submit" />
    </form>
    <script>
      // 练习5(作业)
      // (1)限制表单输入4-11位数字,
      // (条件: 只能出现数字)

      let input1 = document.querySelectorAll("input");
      input1[3].addEventListener("click", function () {
        let reg1 = new RegExp("\\d");
        let res1 = reg1.test(input1[0].value);
        // console.log(res8);
        if (
          input1[0].value.length <= 3 ||
          input1[0].value.length > 11 ||
          res1 == false
        ) {
          alert("错误：请填写4-11位的数字");
        }
      });

      // (2)限制表单输入4-11位字符串
      // (条件: 数字、大写字母[至少出现两个])
      input1[3].addEventListener("click", function () {
        let reg2 = new RegExp("([A-Z]{2}\\d)");
        let res2 = reg2.test(input1[1].value);
        // console.log(res8);
        if (
          input1[1].value.length <= 3 ||
          input1[1].value.length > 11 ||
          res2 == false
        ) {
          alert("错误：必须是4-11位且包含两个以上大写字母");
        }
      });

      // (3)限制表单输入格式为qq邮箱
      // (条件: 数字[5-10] + @qq.com)
      input1[3].addEventListener("click", function () {
        let reg3 = new RegExp("(\\d{5,10}@qq.com$)");
        let res3 = reg3.test(input1[2].value);
        // console.log(res3);
        if (
          input1[2].value.length <= 4 ||
          //   input1[2].value.length > 10 ||
          res3 == false
        ) {
          alert("错误：输入格式必须为qq邮箱");
        }
      });
    </script>
  </body>
</html>
